// 顶部
header {
    display: flex;
    background-color: #d6d4d4;
    .h_l {
        flex: .5;
        img {
            display: block;
            width: 50px;
            height: 50px;
            margin-left: 50px;
        }
    }
    .h_m {
        flex: 1.5;
        line-height: 50px;
        h3 {
            color: #7385a7;
            font-size: 16px;
        }
    }
    .h_r {
        display: flex;
        flex: 1;
        font-size: 14px;
        .h_login {
            flex: 1;
            padding-left: 200px;
            line-height: 50px;
            p {
                &::before {
                    content: '\e971';
                    font-family: 'icomoon';  
                    margin-right: 5px;
                }
            }
        }
        .h_signin {
            flex: 1;
            line-height: 50px;
            p {
                &::before {
                    content: '\e901';
                    font-family: 'icomoon';
                    margin-right: 5px;
                }
            }
        }
    }
}

// main中部
main {
    nav {
        width: 1000px;
        height: 600px;
        margin: 20px auto;
        .swiper-container {
            width: 100%;
            height: 100%;
            border-radius: 15px;
          }
      
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            img {
                width: 100%;
                height: 100%;
            }
      
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
          }
    }
    .speak{
        width: 800px;
        height: 200px;
        margin: 50px auto;
        background-color: #e6e6e6;
        border-radius: 30px;
        background-size: 600px 500px;
        padding: 10px 15px;
        box-shadow: 0 16rpx 16rpx rgba(10, 16, 20, 0.24), 0 0 16rpx rgba(10, 16, 20, 0.12);
        h3 {
            text-align: center;
            color: #333333;
            font-size: 20px;
        }
        h4 {
            font-weight: 400;
            margin-top: 20px;
            color: #9c9b9b;
            font-style: 16px;
        }
        p {
            margin-top: 20px;
            color: #9c9b9b;
        }
    }
    .myself {
        box-shadow: 0 8px 8px rgba(10,16,20,.24),0 0 8px rgba(10,16,20,.12);
        .g {
            background-color: rgb(243, 239, 239);
        }
        .l {
            border-top: 0;
            background-color: rgb(243, 239, 239);
        }
        .h {
            border-top: 0 !important;
            background-color: rgb(243, 239, 239);
        }
        .progress {
            overflow: hidden;
            margin: 20px 0 0 20px;
            width: 300px;
            height: 25px;
            border: 1px solid #1d1b1b;
            border-radius: 15px;
            .progress-bar {
                width: 60%;
                height: 100%;
                background-color: #337ab7;
            }
        }
        .hi {
            display: block;
            font-family: 'icomoon';
            margin-top: 15px;
            text-align: left !important;
            a {
                margin-left: 25px;
            }
        }
    }
    .ewm {
        display: flex;
        width: 1000px;
        height: 150px;
        margin: 30px auto;
        text-align: center;
        .wei {
            flex: 1;
            img {
                float: left;
                display: block;
                width: 80px;
                height: 80px;
                margin: 10px 0 0 65px;
                transition: all .3s;
                &:hover {
                transform: scale(2, 2);
                }
            }
        }
        .qq {
            flex: 1;
            img {
                float: left;
                display: block;
                width: 80px;
                height: 80px;
                margin: 10px 0 0 67px;
                transition: all .3s;
                &:hover {
                    transform: scale(2, 2);
                    }
            }
        }
    }
}
// 底部
footer {
    width: 1163px;
    height: 350px;
    padding:  50px 50px 0 50px;
    background-color: #f2f2f2;
    .h_w {
        padding-bottom: 50px;
        text-align: center;
        display: flex;
        width: 1000px;
        border-bottom: 1px solid #e2e2e2;
        margin: 0 auto;
        ul {
            h3 {
                margin: 20px 0 30px 0;
            }
            li {
                margin-bottom: 20px;
            }
        }
    }
    .h_f {
        display: flex;
        width: 1000px;
        height: 60px;
        margin: 0 auto;
        line-height: 60px;
        .h_f_l {
            flex: 1;
            a {
                display: inline-block;
                margin: 0 20px 0 20px;
            }
        }
        .h_f_r {
            flex: 1;
            span {
                display: inline-block;
                margin-left: 200px;
                font-family: 'icomoon';
                a {
                    display: inline-block;
                    margin: 0 10px 0 5px;
                }
            }
        }
    }
}
